<template>
  <div class="passenger">
    <div class="headers">
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>常用发票信息</span>
          </div>
          <div>
            <el-button
              @click="addInvoice"
              size="mini"
              style="
                width: 96px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >新增
            </el-button>
          </div>
        </div>
        <!-- 常旅客列表 -->
        <el-table
          border
          :data="invoiceList"
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          style="width: 100%"
        >
          <el-table-column prop="invoiceHeadsUp" label="发票抬头" width="200">
          </el-table-column>
          <el-table-column prop="identificationNumber" label="纳税人识别号" width="200">
          </el-table-column>
          <el-table-column prop="registeredAddress" label="注册地址" width="200">
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="200">
          </el-table-column>
          <el-table-column prop="bankName" label="银行名称" width="200">
          </el-table-column>
          <el-table-column prop="bankAccount" label="银行账号"> </el-table-column>
          <el-table-column prop="name" label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button
                @click="getedit(scope.row)"
                type="text"
                size="small"
                >修改</el-button
              >
              <el-button type="text" size="small">操作记录</el-button>
              <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
               :ref="`popover-${scope.$index}`"
                @confirm="cancelInvoice(scope.row)"
              title="这是一段内容确定删除吗？"
            >
              <el-button type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>电子发票查询</span>
          </div>
        </div>
        <!-- 电子发票查询 -->
        <el-form label-width="80px" class="invoiceS" size="mini" :inline="true">
          <el-form-item label="业务类型" class="qq">
            <el-select clearable v-model="business" placeholder="请选择">
            <el-option
              v-for="item in businessList"
              :key="item.value"
              :label="item.label"
              :value="item.business">
            </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="开票类型" class="qq">
            <el-select clearable v-model="make" placeholder="请选择">
            <el-option
              v-for="item in makeList"
              :key="item.value"
              :label="item.label"
              :value="item.make">
            </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="订单号" class="qq">
            <el-input v-model="ordernum"></el-input>
          </el-form-item>
          <el-form-item label="发票类型" class="qq">
            <el-select clearable v-model="type" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.type">
            </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="是否包含行程单" label-width="100" class="qq">
            <el-select clearable v-model="haveitinerary" placeholder="请选择">
            <el-option
              v-for="item in haveitineraryList"
              :key="item.value"
              :label="item.label"
              :value="item.haveitinerary">
            </el-option>
          </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchIncoice('ruleForm')"
              >查询</el-button
            >
            <el-button @click="resetForm('ruleForm')">查询会员</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>发票列表</span>
          </div>
          <div>
            <el-button
              @click="getfrequentTraveler"
              size="mini"
              style="
                width: 96px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >组合开票
            </el-button>
          </div>
        </div>

        <el-table
          border
          :data="orderList"
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          style="width: 100%"
        >
        <el-table-column
      type="selection"
      width="55">
    </el-table-column>
          <el-table-column prop="sourceway" label="业务类型" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.type=='1'">国内机票</template>
              <template v-if="scope.row.type=='2'">国际机票</template>
              <template v-if="scope.row.type=='3'">酒店</template>
              </template>
          </el-table-column>
          <el-table-column prop="ordernum" label="订单号" width="110">
          </el-table-column>
          <el-table-column prop="name" label="发票类型" width="80">
            <template slot-scope="scope">
              <template v-if="scope.row.type=='1'">纸质发票</template>
              <template v-if="scope.row.type=='2'">电子发票</template>
              </template>
          </el-table-column>
          <el-table-column prop="price" label="金额" width="80">
          </el-table-column>
          <el-table-column prop="name" label="发票状态" width="130">state
            <template slot-scope="scope">
              <template v-if="scope.row.state=='1'">未开票</template>
              <template v-if="scope.row.type=='2'">已预约</template>
              <template v-if="scope.row.type=='4'">已开票</template>
              <template v-if="scope.row.type=='5'">待支付</template>
              <template v-if="scope.row.type=='6'">取消</template>
              <template v-if="scope.row.type=='11'">冲红</template>
              <template v-if="scope.row.type=='12'">作废</template>
              <template v-if="scope.row.type=='15'">存储错误订单</template>
              </template>
          </el-table-column>
          <el-table-column prop="name" label="配送状态" width="130">
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间" width="150">
          </el-table-column>
          <el-table-column prop="name" label="申请人" width="130">
          </el-table-column>
          <el-table-column prop="actualtime" label="开票时间" width="150">
          </el-table-column>
          <el-table-column prop="name" label="收款审核" width="130">
          </el-table-column>
          <el-table-column prop="reviewer" label="审核人" width="130">
          </el-table-column>
          <el-table-column prop="name" label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button
                @click="getInfo(scope.row)"
                type="text"
                size="small"
                >详情</el-button
              >
              <el-button type="text" size="small" @click="apply(scope.row)">申请</el-button>
              <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
               :ref="`popover-${scope.$index}`"
               @confirm="deleteInvoiceInvoiceOrderById(scope.row)"
              title="这是一段内容确定删除吗？"
            >
              <el-button type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
              <el-button type="text" @click="getfpxz(scope.row), reference=true" size="small">下载电子发票</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增 -->
      <el-dialog
        title="会员信息查询-新增发票"
        :visible.sync="addLog"
        :before-close="handleClose()"
        width="50%"
      >
        <div class="header-1">
          <div class="too-1-1">
            <span :class="activeName=='first'?'colored':'color'">新增常用发票抬头</span>
            <span :class="activeName=='second'?'colored':'color'">个人/企业</span>
          </div>
        </div>
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="新增常用发票抬头" name="first"></el-tab-pane>
            <el-tab-pane label="个人/企业" name="second"></el-tab-pane>
          </el-tabs>
        </template>

        <div class="pop">
          <el-form :model="addInvoice" status-icon ref="addInvoice" label-width="100px" class="demo-ruleForm">
            <div class="dog_x">
              <div>
              <div>
              <el-form-item label="*发票抬头">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="*识别号">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="注册地址">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            </div>
            <div>
              <el-form-item label="电话">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="银行名称">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            </div>
            </div>
            <div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('custName')">提交</el-button>
              <el-button @click="resetForm('custName')">重置</el-button>
            </el-form-item>
            </div>
            </div>
          </el-form>
        </div>
      </el-dialog>
      <!-- 申请发票 -->
      <el-dialog
        title="申请发票"
        :visible.sync="Apply"
        :before-close="handleClose()"
        width="50%"
      >
      <div class="money_m">
        <div class="m_mon">金额信息</div>
        <div><span>优惠券抵扣：</span><span>金币抵扣：：</span><span>金币抵扣：：</span></div>
        <div>合计：</div>
      </div>
        <div class="pop">
          <div class="m_mon">金额信息</div>
          <el-form :model="addInvoice" status-icon ref="addInvoice" label-width="100px" class="demo-ruleForm">
          <el-col :span="24">
          <el-form-item label="常用发票信息" style="width;100%">
           <el-select clearable v-model="invoiceItem"  placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in invoiceList"
            :key="item.value"
            :label="item.item"
            :value="item.item">
          </el-option>
        </el-select>
        </el-form-item>
        </el-col>
            <div class="dog_x">
              <div>
              <div>
              <el-form-item label="*发票抬头" prop="pass">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="*识别号" prop="checkPass">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="注册地址" prop="checkPass">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            </div>
            <div>
              <el-form-item label="电话" prop="checkPass">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="银行名称" prop="checkPass">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="银行账号" prop="checkPass">
              <el-input type="password" v-model="addInvoice.custName" autocomplete="off"></el-input>
            </el-form-item>
            </div>
            </div>
            <div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('custName')">确认开票</el-button>
            </el-form-item>
            </div>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "invoice",
  data() {
    return {
      invoiceList:[],
      mesInvoice:[
      ],
      reference:false,
      editList:[],
      invoiceItem:'',
      addLog:false,
      ordernum:'',
      activeName:'first',
      business:'',
      Apply:false,
      make:'',
      haveitinerary:'',
      type:'',
       businessList: [{
          business: '1',
          label: '国内机票'
        }, {
          business: '2',
          label: '国际机票'
        }, {
          business: '3',
          label: '酒店'
        }],
        // 订单列表
        orderList:[],
        makeList: [{
          make: '1',
          label: '纸质发票'
        }, {
          make: '2',
          label: '电子发票'
        }],
        haveitineraryList: [{
          haveitinerary: '1',
          label: '含'
        }, {
          haveitinerary: '2',
          label: '不含'
        },
        {
          haveitinerary: '3',
          label: '仅有行程单'
        }],
        typeList: [{
          type: '1',
          label: '专用发票'
        }, {
          type: '2',
          label: '普通发票'
        },
        {
          type: '3',
          label: '定额发票'
        }],
      passengers: false,
      labelPosition: "right",
      formLabelAligned: {
        name: "",
        region: "",
        type: "",
        value: true,
      },
      formLabelAlign: {
        name: "",
        checked: true,
      },
      addinvoce:{
        custName:'',
      },
      radio: 3,
      checked: false,
      sizeForm: {
        name: "",
        region: "",
      },
      model:'',
      row:{},
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
  // 下载电子发票
  getfpxz(row) {
    console.log(row)
    this.$axios.getfpxz({
    sellerTaxNo:row.sellertaxno,
    swno:row.ordernum
    }).then(res =>{
      if(res.code=='200') {
        console.log(res)
        this.$message({
          message: '下载成功',
          type: 'success'
        });
      }
    })
  },
  handleClose() {

  },
  handleClick(tab, event) {
        if(tab.index=='0') {
          this.activeName='first'
          console.log(this.activeName)
        } else {
          this.activeName='second'
          console.log(this.activeName)
        }
      },
    // 查询常旅客信息
    // 查询工单
    addInvoice() {
      this.addLog = true
      // this.getfrequentTraveler()
    },
    getfrequentTraveler() {
      this.$axios
        .getfrequentTraveler({
          // caseId: this.Thequery.caseId,
          // caseStatus: this.Thequery.caseStatus,
          // afterTime: this.Thequery.afterTime,
          // agoTime: this.Thequery.agoTime,
          // orderId: this.Thequery.orderId,
          // orderType: this.Thequery.orderType,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            // 工单列表数据
            // this.Therepairorder = res.data;
          }
        });
    },
    // 查询会员发票抬头
    getpurchaseQueryCommon() {
      this.$axios.getpurchaseQueryCommon({
        customerId:3
      }).then(res =>{
        let list = JSON.parse(JSON.stringify(res.data))
        list.forEach(item => {
          item.item = item.invoiceHeadsUp + item.identificationNumber
        });
        if(res.code=='200') {
          this.invoiceList = list
          console.log(this.invoiceList)
        }
      })
    },
    searchIncoice() {
      this.getlist()
    },
    // 获取发票订单列表
    getlist() {
      console.log(this.business,this.type,this.make)
      this.$axios.getlist({
        sourceway:this.business,
        sort:this.type,
        type:this.make,
        haveitinerary:this.haveitinerary
        // ordernum:this.ordernum,
      }).then(res =>{
        console.log(res)
        if(res.code==200) {
          this.orderList = res.data
          console.log(this.orderList)
        }
      })
    },
    // 查询当前发票订单详情
    getInfo(row) {
      this.$axios.getInfo({
        invoiceid:row.invoiceid,
      }).then(res =>{
        console.log(res)
        if(res.code==200) {

        }
      })
    },
    // 修改发票
    getedit(row) {
      console.log(row)
      this.$axios.getedit({
        // invoiceid:row.customerId
        invoiceid:3,
      }).then(res =>{
        console.log(res)
        if(res.code==200) {
          // this.editList = re
        }
      })
    },
    // 删除发票订单
    deleteInvoiceInvoiceOrderById(row) {
      console.log(row.invoiceid)
      this.$axios.deleteInvoiceInvoiceOrderById({
        invoiceid:row.invoiceid,
      }).then(res =>{
        console.log(res)
        if(res.code==200) {
          this.$message({
          message: '删除成功',
          type: 'success'
        });
        } else {
            this.$confirm('删除失败请核对信息', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
        }
      })
    },
    apply(row) {
      console.log(row)
      this.Apply = true
      this.row = row
    },
    // 下载发票
    getfpkj() {
      let row = this.row
      let item = {
        goodsName:row,goodsName,
        taxCode:row.taxCode,
        taxRate:row.taxRate,
        taxAmount:row.taxAmount,
        // lineType:row.lineType,
        // lineCode:row.lineCode
        // taxPre:row.taxPre,
        // taxVersion:row.taxVersion
      }
      this.$axios.getfpkj({
        sellerTaxNo:row.sellerTaxNo,
        // custTaxNo:row.custTaxNo,
        // custName:row.custName,
        // oilIdentification:row.oilIdentification,
        invMemo:this.invMemo,
        oilIdentification:0,
        sellerBankAccount:row.sellerBankAccount,
        orderType:row.orderType,
        orderDate:row.orderDate,
        // kpType:row.kpType,
        // swno:row.swno,
        orderId:this.orderId,
        item:item
      }).then(res =>{
        if(res.code=='200'){
        console.log(res)
        }
      })
    },
    cancelInvoice(row) {
      console.log(row.commonReimbursementsId)
      this.getdeleteCommonReimbursements(row.commonReimbursementsId)
    },
    // 删除发票抬头
    getdeleteCommonReimbursements(id) {
      this.$axios.getdeleteCommonReimbursements({
        commonReimbursementsId:id
      }).then(res =>{
        console.log(res)
        if(res.code=='200') {
            this.$message({
          message: '删除成功',
          type: 'success'
        });
        }
      })
    }
  },
  mounted() {
      // 查询工单
      this.getfrequentTraveler();
      this.getpurchaseQueryCommon()
      this.getlist()
    },
};
</script>
<style scoped>
.passenger {
  height: 100vh;
  background-color: #f7f7f7;
}
.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
}
.tuo-1 {
  display: flex;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.m_mon {
  line-height: 52px;
  font-size: 16px;
  font-weight: bold;
}
.invoiceS {
  display: flex;
  flex-wrap: wrap;
}
.table {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.colored {
  color: #F6B23E;
}
.add-1-3 {
  margin-top: 15px;
  margin-left: 10px;
  color: #2f80ed;
}
.add-1-4 {
  font-size: 11px;
  color: #828282;
  margin-left: 80px;
  margin-bottom: 15px;
}
.pop-4 {
  font-size: 16px;
  font-weight: bolder;
  color: #ff0000;
}
.el-form {
  display:flex;
  /* flex-direction: column; */
}
.too-1-1 {
  display: flex;
  font-size: 30px;
  margin-bottom: 20px;
}
.too-1-1 >span:first-child {
  margin-right: 200px;
}
.colored {
  color: #F6B23E;
;
}
.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  margin-bottom: 25px;
}
.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 2px;
}
.qq {
  display: flex;
}
.dog_x {
  display: flex;
  flex-direction: column;
}
.dog_x>div:first-child {
  display: flex;
  margin-top: 30px;
}
</style>
